import gfm from "@bytemd/plugin-gfm";
import mediumZoom from "@bytemd/plugin-medium-zoom";
import highlight from "@bytemd/plugin-highlight-ssr";
import { Editor, Viewer } from "@bytemd/react";
import { useState } from "react";
import HeaderInfo from "../headerInfo";
import PublishDrawer from "../publishDrawer";
import { Input } from "antd";
import { useDispatch } from "react-redux";
import { setOpen } from "@/store/modules/publishArticle";
// 引入中文包
import zhHans from "bytemd/lib/locales/zh_Hans.json";
import markdownEditorLess from "./index.module.less";

const plugins = [
  gfm(),
  mediumZoom(),
  highlight(),
  // Add more plugins here
];

function MarkDownEditor() {
  const dispatch = useDispatch();
  const [value, setValue] = useState("");
  const [Title, setTitle] = useState("");
  const handleInputChange = (e: any) => {
    setTitle(e.target.value);
  };
  return (
    <>
      <div className={markdownEditorLess.markDownEditor_content}>
        <HeaderInfo releaseSend={() => dispatch(setOpen(true))} />
        <div className="richText_title_input">
          <Input
            maxLength={20}
            className="input"
            value={Title}
            onChange={handleInputChange}
            placeholder="输入标题..."
          />
        </div>
        <Editor
          value={value}
          locale={zhHans}
          plugins={plugins}
          onChange={(v) => {
            setValue(v);
          }}
        />
      </div>
      <PublishDrawer Title={Title} Content={value} />
    </>
  );
}

export default MarkDownEditor;
